import React from 'react';
import { View, Text, StyleSheet, Pressable, Image } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { COLORS } from '../styles/constants';

export default function LocationBar({
  city = '上海',
  cityImage,
  onPress,
  onImagePress,
  weather,
}) {
  return (
    <Pressable onPress={onPress} style={styles.container} hitSlop={16}>
      {cityImage ? (
        <Pressable
          onPress={e => {
            e.stopPropagation();
            onImagePress?.();
          }}
          hitSlop={8}
        >
          <Image
            source={{ uri: cityImage }}
            style={styles.cityImage}
            resizeMode="cover"
          />
        </Pressable>
      ) : (
        <Icon
          name="location-outline"
          size={18}
          color={COLORS.primary}
          style={{ marginRight: 6 }}
        />
      )}
      <Text style={styles.city} numberOfLines={1}>
        {city}
      </Text>
      <Icon
        name="chevron-down"
        size={18}
        color={COLORS.text.tertiary}
        style={{ marginLeft: 2, marginRight: 8 }}
      />
      {weather ? (
        <View style={styles.weather}>
          <Text style={styles.weatherIcon}>{weather.icon || '☁️'}</Text>
          <Text style={styles.weatherText}>{Math.round(weather.temp)}°</Text>
        </View>
      ) : null}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 4,
  },
  cityImage: {
    width: 30,
    height: 30,
    borderRadius: 15,
    marginRight: 6,
  },
  city: {
    fontSize: 16,
    color: COLORS.text.primary,
    fontWeight: '600',
    maxWidth: 160,
  },
  weather: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    paddingVertical: 2,
    backgroundColor: COLORS.background.secondary,
    borderRadius: 12,
  },
  weatherIcon: {
    fontSize: 14,
    marginRight: 4,
  },
  weatherText: {
    fontSize: 13,
    color: COLORS.text.secondary,
  },
});
